<template>
	<el-form :size="size" ref="form4" label-width="130px" :label-position="labelPosition"
		style="width: 100%;overflow-y: scroll;height: 950rpx;">
		<el-row>
			<el-card class="box-card" style="width: 100%">
				<div slot="header" class="clearfix">
					<el-divider style="align-items: center;"
						title="进入创意工坊的对应的mod订阅界面，在网页空白处右键，复制网页URL,粘贴到此框里，点查询确认后再添加">
						mod订阅
					</el-divider>
					<div style="margin-top: 15px;">
						<el-input :placeholder="placeholder" v-model="modurl" class="input-with-select">
							<el-select style="width: 120px;" v-model="select" slot="prepend" placeholder="请选择">
								<el-option label="模组ID" value="1"></el-option>
								<el-option label="MOD链接" value="2"></el-option>
								<el-option label="MOD名称" value="3"></el-option>
							</el-select>
							<el-button slot="append" icon="el-icon-search" @click="getMod()"></el-button>
						</el-input>
						<br /><br />
					</div>
					<div v-show="modflag" class="block"
						style="display: flex;width: 100%;justify-content: flex-end;align-items: center;margin-bottom: 20rpx;flex-wrap: wrap;">
						<el-avatar shape="square" :size="80" :src="mod.preview_url">
						</el-avatar>
						<view class=""
							style="padding-left: 60rpx;flex: 2;display: flex;flex-direction: column;height: 100%;align-items: flex-start;justify-content: space-between;">
							<text style="flex: 1;margin-bottom: 10rpx;">模组mod名：{{mod.title}}</text>
							<text
						</view>
						<view type="success" hover-stay-time="200" hover-start-time="100" class="mybtn-success"
							hover-class="mybtn-success-select"
							style="padding: 20rpx 30rpx;margin: 0 30rpx;font-weight: bold;border-radius: 10rpx;"
							@click="addMod()">
							添加MOD</view>
					</div>
					<el-divider>【已添加以下mod模组】</el-divider>
				</div>
				<div class="demo-fit">
					<div class="block"
						style="display: flex;width: 100%;justify-content: flex-end;align-items: center;padding: 20rpx 0;flex-wrap: wrap;border-bottom: 2rpx solid #dbdbdb;"
						v-for="(itme,index) in modList" :key="index">
						<el-avatar shape="square" :size="60" :src="itme.preview_url">
						</el-avatar>
						<text style="flex: 1;text-align: start;padding:0 14rpx;box-sizing: border-box;"
							class="title">{{ itme.title }}</text>
						<view class=""
							style="flex: 2;display: flex;flex-direction: column;height: 100%;align-items: flex-start;justify-content: space-between;">
							<text style="flex: 1;margin-bottom: 10rpx;">ID：{{ itme.publishedfileid }}</text>
						</view>
						<view type="warn" hover-stay-time="200" hover-start-time="100" class="mybtn-success"
							hover-class="mybtn-success-select"
							style="padding: 15rpx 20rpx;margin: 0 20rpx;font-weight: bold;border-radius: 10rpx;"
							@click="setMod(index)">
							修改MOD</view>
						<view type="warn" hover-stay-time="200" hover-start-time="100" class="mybtn-warn"
							hover-class="mybtn-warn-select"
							style="padding: 15rpx 20rpx;margin: 0 20rpx;font-weight: bold;border-radius: 10rpx;"
							@click="deleteMod(index)">
							删除MOD</view>

					</div><br />
					<br />
					<br />
					<el-divider>【mod代码】</el-divider>
					<div>
						<el-input @blur="setModList" type="textarea" :rows="10" v-model="modData">
						</el-input>
					</div><br /><br /><br />
				</div>

			</el-card>
		</el-row>
	</el-form>
</template>

<script>
	const db = uniCloud.database();
	export default {
		name: 'mod',
		props: {
			modList: {
				type: [Array],
				default: []
			},
			modData: {
				type: String,
				default: ""
			},
			size: {
				type: String,
				default: 'medium'
			},
			labelPosition: {
				type: String,
				default: 'left'
			}
		},
		data() {
			return {
				placeholder: "请选择搜索方式",
				modurl: '',
				mod: {},
				modflag: false,
				select: '',
				modListData:[]
			}
		},
		watch: {
			select() {
				if (this.select == 1) {
					this.placeholder = "请输入模组ID,例如 2917284826"
				} else if (this.select == 2) {
					this.placeholder = "请输入模组ID,例如 例如 https://steamcommunity.com/sharedfiles/filedetails/?id=2917284826"
				} else {
					this.placeholder = "请输入模组名称,例如 魔卡樱桜よ"
				}
			}
		},
		methods: {
			setModList() {
				this.modListData=[]
				if (this.modData) {
					let str = this.modData
					let arr = str.split('["workshop-')
					for (var i = 1; i < arr.length; i++) {
						let i1 = arr[i].indexOf('"]')
						this.modId = arr[i].substring(0, i1)
						let i2 = arr[i].indexOf('configuration')
						let i3 = arr[i].indexOf('enabled=true')
						this.getMod1(this.modId, arr[i].substring(i2, i3))
					}
				}
				console.log(this.modListData);
				this.$emit('setModListData', this.modListData)
			},
			getMod2(modId,config){
				this.$http.get("http://117.72.51.98:8088/getMod?modId=" + modId).then((
					data) => {
					this.mod.preview_url = data.img
					this.mod.publishedfileid = data.id
					this.mod.title = data.name
					this.modInfo._id = undefined
					this.modInfo.config = config
					db.collection('mod_list').add({
						"preview_url" : this.modInfo.preview_url,
						"publishedfileid" : this.modInfo.publishedfileid,
						"title" : this.modInfo.title,
					}).then((res) => {
						this.modListData.push(this.modInfo)
					}).catch((err) => {
						console.log(err);
					})
				})
			},
			getMod1(modId, config) {
				db.collection("mod_list").where({
						'publishedfileid': modId
					}).get().then((res) => {
						let {
							result: r2
						} = res
						let r3 = r2.data[0]
						if (r3) {
							this.modInfo = {
								...r3,
								'config': config
							}
							this.modListData.push(this.modInfo)
						} else {
							this.getMod2(modId, config)
						}
					})
					.catch((err) => {
						uni.showModal({
							content: err.message || '查询失败',
							showCancel: false
						})
					})
			},
			addMod() {
				let flag = false
				this.modList.forEach(item => {
					if (item.publishedfileid == this.mod.publishedfileid) {
						this.$message({
							message: 'MOD重复添加',
							type: 'warning'
						});
						flag = true
						return
					}
				})
				if (!flag) {
					this.mod.config = "configuration_options={  },"
					this.modList.push(this.mod)
					this.$emit('setModData')
				}
			},
			deleteMod(index) {
				this.modList.splice(index, 1);
				this.$emit('setModData')
			},
			setMod(index) {
				this.$emit('setMod', index)
			},
			getMod() {
				if (this.modurl || this.select == 3) {
					this.$emit('setSelect', this.select)
					if (this.select == 3) {
						this.mod = {}
						this.$emit('setDrawer', true, true)
						this.modurl=this.modurl?this.modurl:"魔卡樱桜よ"
						this.$http.post("http://117.72.51.98:8088/getModByName?p=1&modId=" + this.modurl).then((data) => {
							this.ssModText = data.text
							let total = this.ssModText.substring(this.ssModText.indexOf("of ") + 3, this.ssModText
								.indexOf(" entries"));
							this.$emit('setDrawer', true, false, data.list)
							this.$emit('ssMod', data.list, data.text, total.replace(",", "") - 0)
						})
					} else {
						let que = /^((https|http)?:\/\/)[^\s]+/;

						if (que.test(this.modurl)) {
							let a = this.modurl.indexOf("id=") + 3
							let b = this.modurl.indexOf("&") + 3
							this.modId = this.modurl.substring(this.modurl.indexOf("id=") + 3, this.modurl.includes("&") ?
								this.modurl.indexOf("&") : this.modurl.length)
						} else {
							this.modId = this.modurl;
						}
						this.loading = true;
						db.collection("mod_list").where({
							'publishedfileid': this.modId
						}).get().then((res) => {
							let r2 = res
							if (r2.result.data[0]) {
								this.mod = r2.result.data[0]
								this.modflag = true;
								this.loading = false;
							} else {
								this.$http.get("http://117.72.51.98:8088/getMod?modId=" + this.modId).then((data) => {
									this.mod.preview_url = data.img
									this.mod.publishedfileid = data.id
									this.mod.title = data.name
									this.modflag = true;
									this.mod._id = undefined;
									db.collection('mod_list').add({
										...this.mod
									})
								})
								this.loading = false;
							}
						})
 					}
				} else {
					this.modflag = false;
				}

			},
		}
	}
</script>

<style>
	.mybtn-warn {
		background-color: #e43d33;
		color: #ffffff;
		/* box-shadow: 2rpx 0rpx 2rpx 5rpx #ee3d2d; */
	}
	
	.mybtn-warn-select {
		background-color: #8f939c;
		color: #ffffff;
		/* box-shadow: 2rpx 0rpx 2rpx 5rpx #ee3d2d; */
	}
	
	.mybtn-success {
		background-color: #67C23A;
		color: #ffffff;
		/* box-shadow: 2rpx 0rpx 2rpx 5rpx #ee3d2d; */
	}
	
	.mybtn-success-select {
		background-color: #409EFF;
		color: #ffffff;
		/* box-shadow: 2rpx 0rpx 2rpx 5rpx #ee3d2d; */
	}
</style>